<template>
  <div class="design-model-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="tabs">
        <div class="tab-content">
          <div
            :class="{ active: activeId === '1', 'item': true }"
            @click="handleChange('1')">
            BIM模型
          </div>
          <div
            :class="{ active: activeId === '2', 'item': true  }"
            @click="handleChange('2')">
            全景模型
          </div>
          <div
            :class="{ active: activeId === '3', 'item': true  }"
            @click="handleChange('3')">
            倾斜模型
          </div>
        </div>
        <div class="btn">
          <el-button v-if="hasTabUpload" type="primary" @click="uploadVisible = true">上 传</el-button>
          <el-button type="primary" @click="handleScreen">全 屏</el-button>
        </div>
      </div>
      <div class="bimface-container">
        <div class="content">
          <iframe v-if="activeId === '2' && this.link" class="iframe" :src="link" frameborder="0"></iframe>
          <template v-else>
            <span class="tip" v-if="tip">{{ tip }}</span>
            <bim-face-pro
              ref="bim"
              :loaderOptions="loaderOptions"
              :viewAddedFn="handleViewLoad">
            </bim-face-pro>
          </template>
        </div>
        <div :class="['list', isCollapse ? 'close' : 'open']">
          <div class="btn">
            <span>模型列表</span>
          </div>
          <i
            :class="[
              'flag',
              'iconfont',
              'iconzhankai',
              isCollapse ? 'close' : 'open'
              ]"
            @click="handleOnOff">
          </i>
          <ul class="el-menu-vertical">
            <li
              :class="{ active: modelIndex === item.id }"
              v-for="item in modelList"
              @click="handleClick(item)"
              :key="item.id"
            >
              <span class="item" :title="item.fileName">{{ item.fileName }}</span>
              <i v-if="hasTableDel" class="el-icon-delete-solid" @click.stop="handleDelete(item)"></i>
            </li>
          </ul >
        </div>
      </div>
      <upload-model
        :visible="uploadVisible"
        :loading="btnLoading"
        :hasLinkUpload="hasLinkUpload"
        :hasBimface="hasBimface"
        accept=".rvt,.rfa,.dwg,.dxf,.skp,.ifc,.dgn,.obj,.stl,.3ds,.dae,.ply,.igms,.zip,.gtj,.bfcatzip"
        @submit="handleUpload"
        @cancel="uploadVisible = false">
      </upload-model>
    </main>
  </div>
</template>

<script>
import BimFacePro from '@/components/bimface/project';
import Breadcrumb from '@/components/public/Breadcrumb';
import UploadModel from '@/components/project/technologyManage/uploadModel';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '技术管理',
        },
        {
          name: '模型管理'
        }
      ],
      // tab类型
      activeId: '1',
      // 当前模型的标识，数据不唯一暂用下标
      modelIndex: '',
      tip: '',
      link: '',
      isCollapse: false,
      // 所有bim模型
      modelList: [],
      loaderOptions: {},
      uploadVisible: false,
      btnLoading: false,
      el: null
    };
  },
  computed: {
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    },
    // 是否为链接上传
    hasLinkUpload() {
      return this.activeId === '2';
    },
    // 是否为bimface文件
    hasBimface() {
      return this.activeId === '1' || this.activeId === '3';
    }
  },
  components: {
    BimFacePro,
    Breadcrumb,
    UploadModel
  },
  mounted() {
    this.el = document.querySelector('.bimface-container .content');
    this.getBimfaceList();
  },
  methods: {
    /**
     * 切换tab
     * @param type {String} 类型
     */
    async handleChange(type) {
      this.activeId = type;
      this.modelList = [];
      this.getBimfaceList();
    },
    /**
     * 上传模型
     * @param options {Object}
     */
    async handleUpload(options) {
      const { file, fileType, drawId, fileUrl, fileName, isUrl } = options;
      this.btnLoading = true;
      let result = {};
      if (this.hasLinkUpload) {
        result = await this.$Model.bimfaceUrlUpload({
          fileName,
          fileUrl,
          isUrl,
          moduleType: this.activeId,
          projectName: this.projectName,
          projectId: this.projectId
        });
      } else {
        const fm = new FormData();
        fm.append('file', file);
        const params = {
          fileName,
          moduleType: this.activeId,
          projectName: this.projectName,
          projectId: this.projectId,
          fileType
        };
        if (fileType === '1') params.drawId = drawId;
        result = await this.$Model.bimfaceUpload({
          file: fm,
          ...params
        });
      }
      this.btnLoading = false;
      if (result.success) {
        this.getBimfaceList();
        this.$message.success('上传成功');
        this.uploadVisible = false;
      }
    },
    /**
     * 删除模型
     */
    handleDelete({ id }) {
      this.$confirm('此操作将删除该模型, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteBimface({
          ids: id
        });
        if (success) {
          if (this.modelIndex === id) {
            this.modelIndex = '';
            this.link = '';
            this.loaderOptions = {};
          }
          this.$message.success('删除成功');
          this.getBimfaceList();
        }
      });
    },
    /**
     * 切换模型
     * @param options {Object} 当前模型token等参数
     */
    handleClick(options) {
      const hasObj = this.$checkType(options) === 'object';
      const { id, viewToken, fileId, isUrl } = options;
      if (!hasObj || this.modelIndex === id) return;
      this.modelIndex = id;
      this.tip = '';
      if (this.activeId === '2') {
        this.link = '';
        if (isUrl === '1') {
          this.link = viewToken || '';
          if (!viewToken) {
            this.tip = '无效的链接...';
            return this.$message.warning('无效的链接');
          }
          return;
        }
      }
      if (!viewToken || !fileId) {
        this.tip = '模型正在转换中...';
        return this.$message.warning('模型转换中');
      }
      this.setModel(options);
    },
    handleOnOff() {
      this.isCollapse = !this.isCollapse;
    },
    /**
     * bimface模型加载完成
     * @param viewer: bimface实例
     * @param viewApp
     */
    handleViewLoad(viewer, viewApp) {},
    /**
     * 设置模型配置参数
     * @param options 参数
     */
    setModel(options = {}) {
      const bim = this.$refs.bim;
      bim && bim.destroyView && bim.destroyView();
      this.loaderOptions = options;
    },
    /**
     * 所有模型列表
     * @param options 参数
     */
    async getBimfaceList(options = {}) {
      const { success, data: { data }} = await this.$Model.getBimfaceList({
        project_name: this.projectName,
        projectId: this.projectId,
        pageFlag: false,
        moduleType: this.activeId,
        ...options
      });
      if (success && data.list) {
        this.modelList = data.list || [];
        this.tip = '';
        if (this.modelIndex) {
          const item = this.modelList.find(v => v.id === this.modelIndex);
          if (item) {
            this.tip && this.handleClick(item);
            return;
          }
        }
        const currentItem = this.modelList[0];
        if (currentItem) this.handleClick(currentItem);
        else {
          this.$message.warning('暂无模型');
          this.tip = '暂无模型';
        }
      }
    },
    handleScreen(e) {
      this.fullScreen();
    },
    // 全屏
    fullScreen(ele) {
      const el = ele || this.el;
      if (!el) return;
      const isFullscreen = document.fullscreenElement ||
          document.mozFullscreenElement ||
          document.webkitFullscreenElement;
      if (!isFullscreen) {
        (el.requestFullscreen && el.requestFullscreen()) ||
          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
          (el.msRequestFullscreen && el.msRequestFullscreen());
        return;
      }
      // 退出全屏
      document.exitFullscreen
        ? document.exitFullscreen()
        : document.mozCancelFullScreen
          ? document.mozCancelFullScreen()
          : document.webkitExitFullscreen
            ? document.webkitExitFullscreen()
            : '';
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/main';

  .design-model-page {
    width: 100%;
    height: 100%;
    background: $baseBg;
    main {
      width: 100%;
      height: calc(100% - 40px);
      background: $mainBg;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tabs {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tab-content {
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .item {
            width: 120px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 10px;
            margin: 0 5px;
            color: #fff;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            &.active {
              color: $mainColor;
              border-bottom: 2px solid #fff;
            }
            &:hover {
              color: $mainColor;
              /*background: $mainBtnBg;*/
            }
          }
        }
      }
      .bimface-container {
        width: 100%;
        flex: 1;
        position: relative;
        overflow: hidden;
        .content {
          width: 100%;
          height: 100%;
          background: linear-gradient(0deg, #f6faff 10%, #d6e0eb 70%);
          .iframe {
            width: 100%;
            height: 100%;
          }
          .tip {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 31;
            font-size: 24px;
            color: $mainColor;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            background: linear-gradient(0deg, #f6faff 10%, #d6e0eb 70%);
          }
        }
        .list {
          position: absolute;
          width: 350px;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 32;
          &.open {
            transition: all .3s;
            transform: translateX(0%);
            i.flag {
              transition: all .3s;
              transform: rotate(-180deg);
              border-radius: 10px 0 0 10px;
            }
            /* .btn {
               transition: all .5s;
               transform: translateX(0%);
               i {
                 transform: rotate(-180deg);
               }
             }
             .el-menu-vertical {
               position: relative;
               transform: translateX(0%);
             }*/
          }
          &.close {
            transition: all .3s;
            transform: translateX(-100%);
            i.flag {
              top: 0;
              transform: rotate(0deg) translateX(50px);
              width: 30px;
              height: 30px;
              /*border-radius: 0 10px 10px 0;*/
            }
            /*  .btn {
                transition: all .3s .3s;
                transform: translateX(-210px);
                i {
                  transform: rotate(0deg);
                }
              }
              .el-menu-vertical {
                transform: translateX(-100%);
              }*/
          }
          .btn {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            color: $mainColor;
            background: $mainBg;
            border-bottom: 1px solid #f4f4f4;
          }
          i.flag {
            position: absolute;
            top: 10px;
            right: 20px;
            display: flex;
            z-index: 8;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            background: $mainBg;
            transition: all .3s;
            &:hover {
              color: $mainColor;
            }
          }
          .el-menu-vertical {
            height: calc(100% - 40px);
            overflow: auto;
            background: $mainBg;
            z-index: 8;
            /*animation-name: model-menu;*/
            /*animation-duration: 0.5s;*/
            /*animation-fill-mode: forwards;*/
            &.open {
              transform: translateX(0%);
              /*animation-name: model-menu;*/
              /*animation-duration: 0.5s;*/
              /*animation-fill-mode: forwards;*/
            }
            &.close {
              transform: translateX(-100%);
              /*animation-name: model-menu-hide;*/
              /*animation-duration: 0.5s;*/
              /*animation-fill-mode: forwards;*/
            }
            li {
              width: 100%;
              height: 40px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20px;
              border-right: 3px solid transparent;
              cursor: pointer;
              transition: all .3s;
              &:hover {
                i {
                  visibility: visible;
                }
              }
              &.active {
                color: $mainColor;
                border-right: 3px solid #fff;
                background: rgba(10, 16, 52, .5);
                i {
                  visibility: visible;
                }
              }
              .item {
                width: calc(100% - 30px);
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              i {
                font-size: 20px;
                visibility: hidden;
                padding: 2px 5px;
                transition: visibility .1s;
              }
            }
          }
        }
      }
    }
    @keyframes model-menu {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0%);
      }
    }
    @keyframes model-menu-hide {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }
</style>
